<template>
	<view class="plr-16">
		<!-- 	<view class="flex ptb-12 sort flex-js-center">
			<view
				class="ptb-6 plr-8 font-size-10 sort-active bg-color-item br-8 mlr-12 active flex flex-ai-center sort-item"
				@click='changeSort()'>
				<text>{{handleLang('价格排序')}}</text>
				<w-icon class='ml-8' size="10" :class="{asc:search.sort=='asc'}" name="sort-active"></w-icon>
			</view>
		</view> -->
		<view class="bg-color-item plr-16 ptb-10 br-12 list" v-if="list.length" style="width: 686rpx;">
			<view class="ptb-10 item " v-for="item in list" :key="item.id">
				<view class="flex flex-ai-center flex-js-sb">
					<u-avatar :src="$ossUrl+item.user_info.avatar" size='30'></u-avatar>
					<view class="font-color-textPrimary font-size-14 font-w-600 flex-1 ml-8">{{item.user_info.nickname}}
					</view>
					<view class="font-color-999 font-size-12">{{item.createtime | formatDate}}</view>
				</view>
				<view class="flex flex-js-sb flex-ai-center mt-8">
					<view class="font-color-textPrimary">
						<view class="flex flex-ai-center">
							<text>{{item.goods_name && handleLang(item.goods_name)}}</text>
							<view
								class="font-size-10 flex flex-center bg-color-theme font-color-white plr-3 ptb-1 br-4 ml-4">
								{{item.pay_way|formatPayName}}
							</view>
						</view>
						<view class="font-size-18 flex mt-4 flex-ai-center flex-js-sb">
							￥{{item.price}} <text class="font-size-12 font-color-222 ml-16">数量:{{item.number}}</text>
						</view>

					</view>
					<w-button v-if="item.order_status==4" size="mini" style="font-size: 24rpx;width: 120rpx;"
						shape="circle" disabled>{{handleLang('出售中')}}</w-button>
					<w-button v-if="item.order_status==1" size="mini" :disabled="!item.is_sold"
						style="font-size: 24rpx;width: 120rpx;" shape="circle" type="dark"
						@click='toSell(item)'>{{!item.is_sold? handleLang('求购中'):handleLang("出售")}}</w-button>
				</view>
			</view>
		</view>
		<w-loading :type="loading" class="mt-12" emptyType="search" empty-top="40"></w-loading>
	</view>
</template>

<script>
	import {
		getBegBuyList
	} from '@/api/trad/index.js'
	export default {
		props: {
			id: {
				type: [String, Number],
				default: null
			},
			product: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				search: {
					page: 1,
					sort: 'desc'
				},
				list: [],
				loading: 'none'
			}
		},
		filters: {
			formatPayName(v) {
				let map = {
					huifu: "钱包A",
					yibao: "易"
				}
				return map[v]
			},
		},
		watch: {
			id: {
				immediate: true,
				handler(v) {
					this.search.collection_id = v;
					this.search.page = 1
					this.getList(this.search)
				}
			}
		},
		methods: {
			loadMore() {
				let search = this.$tools.copyObj(this.search)
				search.page++
				this.getList(search);
			},
			toSell(item) {
				if (!this.product.is_has) {
					return uni.showToast({
						icon: 'none',
						title: "当前未持有该藏品"
					})
				}
				uni.navigateTo({
					url: `/pages/market/sellBegBuy?buy_id=${item.id}&collection_id=${this.id}&pay_way=${item.pay_way}&number=1`
				})
			},
			changeSort() {
				this.search.sort = this.search.sort == 'asc' ? 'desc' : 'asc';
				this.search.page = 1
				this.getList(this.search)
			},
			getList(search) {
				if (this.loading == 'loading' && this.loading == 'nomore') return;
				this.loading = 'loading'
				return getBegBuyList(search).then(res => {
					if (search.page == 1) {
						this.list = []
					}
					this.loading = 'none'
					if (res.data.data.length) {
						this.search = search;
					}
					this.list = this.list.concat(res.data.data)
					if (res.data.data.length < res.data.per_page) {
						this.loading = 'nomore'
					}
					if (!res.data.total) {
						this.loading = 'empty'
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.sort {
		.sort-item.active {
			@extend .border-color-theme,
			.font-color-textPrimary;
		}

		.asc {
			transform: rotate(180deg);
		}
	}

	.list {
		.item {
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		}

		.item:last-child {
			border-bottom: none;
		}
	}
</style>